import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import weui from 'weui.js';
import weixinShare from '../../lib/weixinShare';
import { addErrorListener } from '../../lib/handleError';

import AJAX from '../../lib/ajax';

const Dialog = require('../MyPackage/components/Dialog')

require('../../lib/rem');
require('../../styles/common.less');
require('./CouponsMyTask.less');
require('../../styles/iconfont/iconfont.css');

class CouponsMyTaskElem extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isReady: false,     //是否可以加载页面
      current: 0,
    };
  }

  componentWillMount() {
    addErrorListener()()
    weixinShare.hideAll()
  }

  componentDidMount() {
    AJAX.request("user_home", {}, (data) => {
      if (data.code === 0) {
        this.setState({
          userInfo: data.body
        }, () => this.fetchCouponsList());
      }
    }, './Coupons');

    // 添加退后事件
    window.addEventListener('popstate', () => {
      alert(123423);
    });
  }

  /** 获取任务列表 */
  fetchCouponsList = () => {
    const { userInfo = {}, current: status = 0 } = this.state;
    const { id, phone, unionid } = userInfo;
    if (id && phone && unionid) {
      const loading = weui.loading('加载中');
      AJAX.request("my_task_list", { status }, (data) => {
        if (data.code === 0) {
          this.setState({
            taskList: data.body,
            isReady: true,
          });
        }
      }, './Coupons');
      loading.hide();
    } else window.location.href = './Coupons';
  }

  /** 切换当前状态 */
  handleChangeStatus = (type, e) => {
    const { current } = this.state;
    const { task_status } = this.refs;
    const { target } = e;
    task_status.children[current].classList.remove('active');
    this.setState({
      current: type,
    }, () => {
      target.classList.add('active');
      this.fetchCouponsList();
    });
  }

  /** 跳转 */
  handleRouter = (item) => {
    if (item.status === 2) {
      const { tips_modal } = this.refs;
      tips_modal.style.display = 'flex';
      setTimeout(() => {
        tips_modal.style.display = 'none';
      }, 1500);
    } else {
      window.location.href = `./CouponsTask?taskId=${item.id}`;
    }
  }

  render () {
    const { taskList = [], current } = this.state;

    return (
      this.state.isReady &&
      <div className="couponsTask">
        <div className="coupons_header">
          <span
            className="icon iconfont iconIcon_left"
            onClick={() => history.back(-1)}
          >
            返回
          </span>
          <label className="header_title">我的任务</label>
          <ul className="header_task_status" ref="task_status">
            <li className="task_status_item active" onClick={(e) => this.handleChangeStatus(0, e)}>全部<b /></li>
            <li className="task_status_item" onClick={(e) => this.handleChangeStatus(1, e)}>进行中<b /></li>
            <li className="task_status_item" onClick={(e) => this.handleChangeStatus(2, e)}>已成功<b /></li>
            <li className="task_status_item" onClick={(e) => this.handleChangeStatus(3, e)}>已失败<b /></li>
          </ul>
        </div>
        <div className="coupons_main">
          <div className="main_box">
            {taskList.length ? (
              <ul className="task_list">
                {taskList.map(item => (
                  <li className="task_item" onClick={() => this.handleRouter(item)}>
                    <div className="item_content">
                      <div className="content_info">
                        <img src={item.icon} alt="" />
                        <label>{item.name}</label>
                      </div>
                      <div className="content_vice">
                        <label>奖励:{item.coupon / 100}元寄件券</label>
                        <span>{item.userTaskStatusName}</span>
                      </div>
                    </div>
                    <div className="item_footer">
                      <div className="footer_notice">
                        <img src="https://cdn2.jinlb.cn/pic/b8/aa/b8aad9cee7872fde2ca410c901ee50af.png" alt="" />
                        <p>{item.endTime}</p>
                      </div>
                      <span className="icon iconfont iconIcon_right" />
                      <div className="footer_answer">{item.userTaskStatus === 3 && `失败原因:${item.result}`}</div>
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <div className="unTask">
                <img src="https://cdn2.jinlb.cn/pic/1d/43/1d43fc645af0b2580ad87f32bc11eae2.png" />
                <p>{current === 0 ? '您还未做过任务，快去做任务赚取寄件券吧！' : '暂无任务'}</p>
              </div>
            )}
          </div>
          <div className="myTaskBtn_box">
            <button
              className="myTaskBtn"
              onClick={() => location.href="./CouponsMy"}
            >
              我的寄件券
              <span className="icon iconfont iconIcon_right" />
            </button>
          </div>
        </div>
        <div className="tips_modal" ref="tips_modal">
          <span>该任务已下线</span>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<CouponsMyTaskElem />, document.getElementById('app'));
if (module.hot) {
  module.hot.accept();
}
